<template>
  <view class="container">
    <!-- 顶部文本域 -->
    <textarea
      class="welcome-textarea"
      placeholder="hello,欢迎使用"
      v-model="textareaValue"
      @input="handleTextareaInput"
	  maxlength="200"
    ></textarea>

    <!-- 图片展示及选择区域 -->
    <view class="image-grid">
      <!-- 已选图片列表 -->
      <view
        class="image-item"
        v-for="(img, index) in selectedImages"
        :key="index"
      >
        <image :src="img" class="image"></image>
        <!-- 删除按钮 -->
        <view class="delete-btn" @click.stop="deleteImage(index)">
          <text class="delete-icon">×</text>
        </view>
      </view>

      <!-- 选择图片按钮 -->
      <view class="add-btn" @click="chooseImage">
        <text class="add-icon">+</text>
        <text class="add-text">选择图片</text>
      </view>
    </view>

    <!-- 底部发布按钮 -->
    <view class="publish-btn" @click="handlePublish">发布</view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 文本域内容
const textareaValue = ref('hello,欢迎使用');
// 已选择的图片列表
const selectedImages = ref([]);

// 处理文本域输入
const handleTextareaInput = (e) => {
  textareaValue.value = e.detail.value;
};

// 选择图片方法（使用兼容的 uni.chooseImage API）
const chooseImage = () => {
  uni.chooseImage({
    count: 9, // 最多可选择9张图片
    sizeType: ['original', 'compressed'], // 原图或压缩图
    sourceType: ['album', 'camera'], // 相册或相机
    success: (res) => {
      // 将选择的图片添加到已选列表
      selectedImages.value = [...selectedImages.value, ...res.tempFilePaths];
    },
    fail: (err) => {
      console.error('选择图片失败:', err);
      uni.showToast({
        title: '选择图片失败，请重试',
        icon: 'none',
      });
    },
  });
};

// 删除图片
const deleteImage = (index) => {
  selectedImages.value.splice(index, 1);
};

// 发布内容
const handlePublish = () => {
  // 检查内容是否为空
  if (!textareaValue.value.trim() && selectedImages.value.length === 0) {
    return uni.showToast({
      title: '内容不能为空',
      icon: 'none',
    });
  }

  // 模拟发布逻辑
  console.log('发布内容:', {
    text: textareaValue.value,
    images: selectedImages.value,
  });

  // 显示成功提示
  uni.showLoading({ title: '发布中...' });
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '发布成功',
      icon: 'success',
    });
    
    // 清空内容（可选）
    textareaValue.value = '';
    selectedImages.value = [];
  }, 1000);
};
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  min-height: 100vh;
}

/* 顶部文本域样式 */
.welcome-textarea {
  width: 100%;
  height: 200px;
  padding: 16px;
  font-size: 16px;
  color: #333;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  resize: none;
  margin-bottom: 20px;
  background-color: #f9f9f9;
  line-height: 1.6;
  box-sizing: border-box;
  
  /* 聚焦时样式 */
  &:focus {
    border-color: #007AFF;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
  }
}

/* 图片网格布局 */
.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

/* 已选图片容器 */
.image-item {
  position: relative;
  width: calc((100% - 24px) / 3);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
  
  &:hover {
    transform: scale(1.03);
  }
}

/* 图片样式 */
.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 删除按钮样式 */
.delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: #e5e5e5;
  display: flex;
  align-content: center;
  justify-content: center;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.8;
  
  &:hover {
    opacity: 1;
    transform: scale(1.1);
    background-color: #ff3b30;
  }
}

/* 删除按钮图标样式 */
.delete-icon {
  font-size: 16px;
  font-weight: bold;
}

/* 选择图片按钮样式 */
.add-btn {
  width: calc((100% - 24px) / 3);
  aspect-ratio: 1 / 1;
  border: 2px dashed #ccc;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #f9f9f9;
  
  &:hover {
    border-color: #007aff;
    color: #007aff;
    background-color: #f0f7ff;
  }
}

/* 选择图片按钮图标样式 */
.add-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

/* 选择图片按钮文字样式 */
.add-text {
  font-size: 14px;
}

/* 底部发布按钮样式 */
.publish-btn {
  width: 100%;
  height: 52px;
  line-height: 52px;
  text-align: center;
  background-color: #007aff;
  color: #fff;
  font-size: 18px;
  border-radius: 26px; /* 更大的圆角 */
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
  font-weight: 500;
  
  &:hover {
    background-color: #0066cc;
    box-shadow: 0 6px 16px rgba(0, 122, 255, 0.3);
  }
  
  &:active {
    transform: translateY(2px);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
  }
}
</style>